<template>
  <!-- 输入区域 -->
  <div
    class="sticky bottom-0 left-0 min-w-full lg:w-1/2 md:w-[80%] md:min-w-3xl sm:min-w-[640px] transition-all duration-300 mx-auto mb-5 bg-white">
    <div class="bg-gray-100 rounded-3xl px-4 py-3 mx-4 border border-gray-200 flex flex-col">
      <!-- 输入框 -->
      <textarea placeholder="给Kitten Bot发送消息" v-model="userMessage" ref="textareaRef" @input="autoResize"
        class="bg-transparent border-none outline-none w-full text-base resize-none min-h-12" rows="2"></textarea>

      <!-- 下方容器 -->
      <div class="flex mt-3">
        <div class="flex gap-2 relative">

          <!-- 模型选择 (当前选择模型) -->
          <div @click="toggleModelDropdown" ref="modelDropdownRef"
            class="border border-gray-300 px-2 py-1 rounded-3xl flex items-center justify-center hover:bg-gray-200 cursor-pointer">
            <SvgIcon :name="currSelectedModel.icon" customCss="size-5 mr-1.5" />
            <span class="text-gray-800 text-xs">{{ currSelectedModel.name }}</span>
            <SvgIcon name="down-arrow" customCss="size-5 ml-1 text-gray-800 transform transition-transform duration-300"
              :class="isModelDropdownOpen ? 'rotate-180' : ''" />
          </div>
          <!-- 下拉框菜单 (可选模型列表) -->
          <div v-if="isModelDropdownOpen"
            class="absolute top-8 left-0 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-10 overflow-hidden">

            <div v-for="model in models" :key="model.id" @click="selectModel(model)"
              class="px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between">
              <div class="flex items-center">
                <SvgIcon :name="model.icon" customCss="w-5 h-5 mr-2" />
                <div class="flex flex-col text-xs">
                  <div class="text-gray-800">{{ model.name }}</div>
                  <div class="text-gray-500">{{ model.description }}</div>
                </div>
              </div>
              <!-- 右侧对号 -->
              <SvgIcon v-if="model.selected" name="check" customCss="w-3 h-3 text-gray-600" />
            </div>
          </div>

          <!-- 联网搜索 -->
          <div @click="toggleNetWorkSearch"
            :class="isNetWorkSearchOpen ? 'bg-blue-200 text-[#222533] hover:bg-blue-400' : ''" class="ml-3 border px-2 py-1 rounded-3xl flex items-center justify-center cursor-pointer border-gray-300
               transition-colors duration-200">
            <SvgIcon name="net-work" customCss="w-5 h-5 mr-1.5 text-[#4d6bee] " />
            <span class="text-xs mr-1">联网搜索</span>
          </div>
        </div>
        <div class="grow"></div>

        <!-- 发送按钮 -->
        <div class="flex justify-end">
          <button :disabled="!userMessage.trim()" @click="handleSendMessage" 
            class="flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed
            bg-[#4d6bfe] rounded-full w-8 h-8 border border-[#4d6bfe] hover:bg-[#3b5bef] transition-colors">
            <SvgIcon name="upArrow" customCss="w-5 h-5 text-white" />
          </button>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import SvgIcon from './SvgIcon.vue';
import { message } from 'ant-design-vue'
import { useChatStore } from '@/store/ChatStore'



// 接收父组件传递的属性
const props = defineProps({
  // textarea 中用户输入的用户消息
  modelValue: {
    type: String,
    required: true
  },
})

// 定义 emits
const emit = defineEmits(['update:modelValue', 'sendMessage'])

// 计算属性，用于 v-model 的双向绑定
const userMessage = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
})

// ==================== 消息发送事件 ====================
const handleSendMessage = () => {
  // 若消息为空
  if (!userMessage.value.trim()) {
    message.warning('消息不能为空');
    return
  }
  // 发送消息
  emit('sendMessage', {
    selectedModel: chatStore.selectedModel,
    isNetWorkSearch: chatStore.isNetworkSearchSelected
  })
  // 清空输入框
  userMessage.value = ''
}



// ==================== 选择模型事件 ====================
const chatStore = useChatStore()
// 模型列表
const models = computed(() => {
  return chatStore.models
})
const currSelectedModel = computed(() => chatStore.selectedModel)  // 当前选中的模型

const selectModel = (model) => {  // 选择模型
  chatStore.updateSelectedModel(model)

  // 关闭下拉菜单
  isModelDropdownOpen.value = false;
}

// 切换模型
const isModelDropdownOpen = ref(false)
const modelDropdownRef = ref(null)
const toggleModelDropdown = () => {
  // 展示/隐藏下拉菜单
  isModelDropdownOpen.value = !isModelDropdownOpen.value;
};

// 点击外部区域关闭下拉菜单
const handleClickOutside = (event) => {
  if (modelDropdownRef.value && !modelDropdownRef.value.contains(event.target)) {
    isModelDropdownOpen.value = false
  }
}


// ==================== 是否启用联网搜索 ====================
const isNetWorkSearchOpen = computed(() => {
  return chatStore.isNetworkSearchSelected
})
const toggleNetWorkSearch = () => {
  chatStore.updateNetworkSearchStatus(!chatStore.isNetworkSearchSelected)
}


// 自动调整文本域高度
const textareaRef = ref(null)
const autoResize = () => {
  const textarea = textareaRef.value
  if (textarea) { // 若文本域存在
    textarea.style.height = 'auto' // 1. 先将高度重置为 'auto'
    // 获取内容的实际高度
    // console.log(textarea.scrollHeight)
    // 高度大于120, 则设置高度为120
    textarea.style.height = textarea.scrollHeight > 144 ? '144px' : textarea.scrollHeight + 'px'
  }
}

// 挂载时添加事件监听器
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 卸载时移除事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})


</script>

<style scoped></style>